<template>
		<u-popup :show="shopping_isShow_1" @close="shoppingModeConcel">
		<view class="shopping-box">
			<view class="shopping" >
				<view class="u-icon">
					<u-icon name="close-circle" size="38rpx" @click="shoppingModeConcel"></u-icon>
				</view>
				<view class="shopping-top">
					<view class="left">
						<view class="img">
							<image :src="selected_goods_str_img" mode=""></image>
						</view>
					</view>
					<view class="right">
						<view class="img-txt">
							<view class="price">
								￥{{selected_goods_shop_price}}元起
							</view>
							<view class="price">
								VIP￥{{vip_price}}元起
							</view>
						</view>
					</view>
				</view>
				<view  class="shopping-middle" v-if="more_goods_shopping_list.length != 0" >
					<view class="left"  >
						规格选择
					</view>
				</view>
				
				<view class="shopping-goods-str">
						<view class="right" v-if="more_goods_shopping_list.length == 0" >
							<view class="icon" v-if="goods_number!=0"  @click="delgoodsnum">
								<image class="img" :src="img_url+'/statics/yilangmp/jian.png'" mode=""  ></image>
							</view>
							<view class="icon" v-if="goods_number==0"  @click="delgoodsnum">
								<image class="img" :src="img_url+'/statics/yilangmp/jian2.png'" mode=""   ></image>
							</view>
							<view class="input-box">
								<input class="input"  type="text" :value="goods_number" @input="inputgoodsnum" @blur="inputblur"/>
							</view>
							<view class="icon  icon2 " @click="addgoodsnum">
								<image class="img" :src="img_url+'/statics/yilangmp/jia.png'" mode="" ></image>
							</view>
						</view>
					<scroll-view scroll-y="true" style="height: 490rpx;padding-bottom: 100rpx;" v-if="more_goods_shopping_list.length != 0">
				<template  v-for="(value,index) in more_goods_shopping_list">
					<view class="goods-attr-box" :key='index' >
						<view class="left">
							<image class="img" :src="value.attr_img" ></image>
						</view>
						<view class="moddle">
							<view class="attr-name">
								{{value.attr_value}}
							</view>
							<view class="price">
								库存：{{value.product_number}}
							</view>
							<view class="price price2 ">
								<text class="txt"  >
									￥{{value.shop_price}}
								</text>
								<text>
									VIP￥{{value.vip_price}}
								</text>
							</view>
						</view>
						<view class="right">
							<!-- v-if="value.buy_number > 0 "  -->
							<view class="icon"   @click="delgoodsnum(index)"   >
								<image class="img" :src="img_url+'/statics/yilangmp/jian.png'" mode=""  ></image>
							</view>
							<view class="icon"  v-if="value.buy_number == 0 &&false" >
								<image class="img" :src="img_url+'/statics/yilangmp/jian2.png'" mode=""   ></image>
							</view>
							<view class="input-box">
								<input class="input"  type="number" :value="goodsnum[index]"   @input="inputgoodsnum($event,index)"  @blur="inputblur(index,value.product_number)"/>
							</view>
							<view class="icon  icon2 "   @click='addgoodsnum(index,value.product_number)'    >
								<image class="img" :src="img_url+'/statics/yilangmp/jia.png'" mode="" ></image>
							</view>
						</view>
					</view>
				</template>
					 </scroll-view>
					 <view class="checknum">
					 	<text>已选数量:{{allgoodsnum}}件</text>
					 </view>
				</view>
				<view class="bottom-goods-str">
					<!-- <view class="left">
						<text class="txt" @click="shoppingModeConcel()" >
							取消
						</text>
					</view> -->
					<view class="right" @click="shoppingModeConfirm()" >
						<text class="txt" >
							加入购物车
						</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { BASE_URL } from '@/config/app';
	export default {
		name:"addshoppingCar",
		data() {
			return {
				index:'',
				product_number:'',
				$event:'',
				shopping_isShow_1:false,
				goods_number:1,
				img_url:BASE_URL
			};
		},
		props:{
			shopping_isShow:Boolean,
			login_isShow:Boolean,
			scroll_Height_1:'',
			selected_goods_str_img:String,
			selected_goods_shop_price:String,
			selected_goods_market_price:String,
			vip_price:String,
			more_goods_shopping_list:Array,
			goodsnum:Array,
			allgoodsnum:Number,
			allgoodsmoney:Number,
			},
		methods:{
			shoppingModeConcel(){
				this.goods_number=1
				this.$emit('shoppingModeConcel')
			},
			delgoodsnum(index){
				if(this.goods_number>0){
					this.goods_number--
				}
				this.$emit('delgoodsnum',index)
			},
			inputgoodsnum($event,index){
				this.goods_number=$event.detail.value
				this.$emit('inputgoodsnum',$event,index)
			},
			inputblur(index,product_number){
				this.$emit('inputblur',index,product_number)
			},
			addgoodsnum(index,product_number){
				this.goods_number++
				this.$emit('addgoodsnum',index,product_number)
			},
			shoppingModeConfirm(){
				this.$emit('shoppingModeConfirm')
				this.goods_number=1
			},
			
		},
		watch:{
			shopping_isShow(newVal,oldVal){
				console.log(newVal,oldVal)
				this.shopping_isShow_1=newVal
			}
		}
	}
</script>

<style lang="scss">
		.shopping-box {
			height: 100%;
			.shopping {
				margin: auto;
				margin-top: 20rpx;
				background-color: #FFFFFF;
				border-radius: 15rpx;
				position: relative;
				padding-bottom: 30rpx;
				  
				.u-icon{
					position: absolute;
					right: 10rpx;
					top: 0;
				}
				.shopping-top {
					width: 100%;
					display: flex;
					.left {
						flex: 1;
						.img {
							width: 100%;
							height: 200rpx;
							display: flex;
							image{
								width: 198rpx;
								height: 198rpx; 
								border-radius: 20rpx; 
								margin-left: 30rpx;
								border: 2rpx solid #979797;
							}
						}
					}
					.right {
						flex: 2;
						line-height: 60rpx;
						padding-top: 20rpx;
						.img-txt {
							padding-left: 20rpx;
							height: 200rpx;
							font-size: 28rpx;
							.price {
								line-height: 60rpx;
								height: 60rpx;
								color: #C50A1D;
							}
							.number {
								line-height: 80rpx;
								height: 100rpx;
								font-size: 24rpx;
							}
							.name {
								font-size: 28rpx;
								line-height: 60rpx;
							}
						}
						
					}
				}
				.shopping-middle {
					width: 100%;
					display: flex;
					font-size: 28rpx;
					.left {
						flex: 1;
						padding-left: 30rpx;
						padding-top: 10rpx;
						line-height: 70rpx;
						font-size: 30rpx;
					}
					.right {
						flex: 2;
						display: flex;
						.price {
							flex: 1;
						}
						.old-price {
							flex: 1;
							text-decoration:line-through;
						}
						
					}
				}
				
				.shopping-goods-str {
					background-color: #FFFFFF;
					width: 100%;

					.right {
						width: 30%;
						padding-bottom: 100rpx;
							height: 150rpx;
							padding-top: 50rpx;
							padding-bottom: 40rpx;
							padding-right: 10rpx;
							display: flex;
							margin: auto;
						 
							.icon {
								background-color:#FFFFFF;
								width: 50rpx;
								height: 50rpx;
							
								margin-left: 5rpx;
								margin-right: 5rpx;
								 
								text-align: center;
								border-top-left-radius: 10rpx;
								border-bottom-left-radius: 10rpx;
								.img{
									width: 20rpx;
									height: 20rpx;
									margin: auto;
								}
							}
							.icon2{
								background-color:#FFFFFF;
								border-top-left-radius: 0;
								border-bottom-left-radius: 0;
								border-top-right-radius: 10rpx;
								border-bottom-right-radius: 10rpx;
							}
							.input-box {
								width: 100rpx;
								height: 50rpx;
								background-color:#FFFFFF;
								.input {
									width: 100rpx;
									height: 50rpx;
									line-height: 50rpx;
									text-align: center;
								}
							}
						}
					.goods-attr-box {
						width: 100%;
						height: 150rpx;
						display: flex;
						margin-top: 10rpx;
						background-color: #F6F6F6;
						.left {
							width: 160rpx;
							height: 150rpx;
							padding-left: 10rpx;
							padding-top: 10rpx; 
							.img {
								height: 130rpx;
								width: 130rpx;
							}
						}
						.moddle {
							flex: 1;
							height: 150rpx;
						
							padding-top: 10rpx;
							padding-bottom: 10rpx;
							.attr-name {
								width: 100%;
								line-height: 30rpx;
								font-size: 28rpx;			
								display: -webkit-box;
								
								word-break: break-all;				
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
								
							}
							.price {
								width: 100%;
								line-height: 30rpx;
								font-size: 24rpx;
								color: #939393;
								padding-top: 10rpx;
								.txt {
									padding-right: 10rpx;
								}
								
							}
							.price2 {
								padding-top: 5rpx;
							}
						}
						.right {
							flex: 1;
							height: 150rpx;
							padding-top: 50rpx;
							padding-bottom: 40rpx;
							padding-right: 10rpx;
							display: flex;
							margin: auto;
							justify-content: flex-end;
							   
							.icon {
								background-color:#FFFFFF;
								width: 50rpx;
								height: 50rpx;
								margin-left: 5rpx;
								margin-right: 5rpx;
  
								text-align: center;
								border-top-left-radius: 10rpx;
								border-bottom-left-radius: 10rpx;
								.img{
									width: 20rpx;
									height: 20rpx;
									margin: auto;
								}
							}
							.icon2{
								background-color:#FFFFFF;
								border-top-left-radius: 0;
								border-bottom-left-radius: 0;
								border-top-right-radius: 10rpx;
								border-bottom-right-radius: 10rpx;
							}
							.input-box {
								width: 100rpx;
								height: 50rpx;
								background-color:#FFFFFF;
								.input {
									width: 100rpx;
									height: 50rpx;
									line-height: 50rpx;
									text-align: center;
								}
							}
						}
					}
					
					.input {
						width: 100%;
						height: 70rpx;
						display: flex;
						.left {
							flex: 1;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
						}
						.right {
							flex: 2;
							height: 70rpx;
							input{
								width: 95%;
								height: 66rpx;
								border: 2rpx solid #A5A5A5;
							}
						}
					}
				}
				.checknum{
					position: absolute;
					bottom: 80rpx;
					margin-left: 30rpx;
					// padding-top: 200px;
					text:nth-child(1){
						margin-right: 20rpx;
					}
				}
				.bottom-goods-str {
					width: 100%;
					height: 60rpx;
					padding-bottom: 20rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					display: flex;
					.left {
						height: 50rpx;
						.txt {
							color: #FFFFFF;
							background-color: #A5A5A5;
							padding: 8rpx 65rpx;
							border-radius: 8rpx;
						}
					}
					.right {
						text-align: center;
						width: 90%;
						margin: 0 auto;
						border-radius: 40rpx;
						height: 60rpx;
						line-height: 60rpx;
						background-color: #FA5623 ;
						color: #FFFEFF;
					}
				}
			
			}
		}
</style>
